<template>
	<div>
		<div class="card">
			<div class="content">
				<input type="text" placeholder="请输入卡面号" class="custinput" v-model="CardInfo.strCardNum">
				<input type="text" placeholder="请输入手机号后四位" class="custinput" v-model="CardInfo.TelNum">
				<div class="tips">
					请手动输入卡面号和手机号后四位进行雪卡信息查询！
					【超时30分钟内免收超时费，超30分钟外（不足30分钟按30分钟计算）按门市价收取超时费】
				</div>
				<div></div>
			</div>
			<button class="btn" @click="query">查询</button>
		</div>
	</div>
</template>

<script>
	import { mapMutations } from "vuex";
	export default {
		data () {
			return {
				CardInfo : {
					sourceType : "1",
					strCardNum : "",
					TelNum : ""
				}
			}
		},
		created () {
			// this.getCode();
		},
		methods : {
			getCode () {
				let appId = "wxc2b279af443658f1";
				let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(location.href)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
				let query = {};
				let search = window.location.search.substring(1).split("&").forEach(item=>{
					let arr = item.split("=");
					query[arr[0]] = arr[1];
				});
				console.log(query)
				if (!query.code) {
					window.open(url,"_self");
				} else {
					sessionStorage.setItem("code",this.$route.query.code);
				}
			},
			...mapMutations({
				setcardInfo : "setcardInfo"
			}),
			query () {
				let reg = /^[a-zA-Z0-9_]{0,}$/;
				if (!this.CardInfo.strCardNum) {
					this.$message({
							message : "请填写卡号",
							type : "warning",
							showClose : true
						});
					return;
				} else if (!this.CardInfo.TelNum) {
					this.$message({
							message : "请填写手机号",
							type : "warning",
							showClose : true
						});
					return;
				} else if (this.CardInfo.TelNum.length < 4) {
					this.$message({
							message : "请输入手机号后4位",
							type : "warning",
							showClose : true
						});
					return;
				} else if (!reg.test(this.CardInfo.strCardNum) || !reg.test(this.CardInfo.TelNum)) {
					this.$message({
							message : "不可输入汉字和特殊符号",
							type : "warning",
							showClose : true
						});
					return;
				}
				this.axios.post("/IceCardSelfHelp/GetIceCardInfo",this.CardInfo).then(res=>{
					if (res.resStatusInfo.resultCode == "200") {
						sessionStorage.setItem("CardInfo",JSON.stringify(this.CardInfo));
						sessionStorage.setItem("cardDetailInfo",JSON.stringify(res.cardInfo));
						this.setcardInfo(res.cardInfo);
						this.$router.push({
							name : "detail",
							params : {
								carInfo : {
									...res
								}
							}
						});
					} else {
						this.$message({
							message : res.resStatusInfo.errReason,
							type : "error",
							showClose : true
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	input  {
	    outline:none;
	}
	.card {
		position: relative;
		width: 95%;
		height: 200px;
		margin: 10px auto;
		background-color: #FFF;
		border-radius: 5px;
		box-shadow: 0px -5px 5px rgba(255,255,255,0.6);
		.content {
			width: 100%;
			padding: 20px;
		}
	}
	.custinput {
		padding: 10px;
		border: none;
		width: 85%;
		margin-bottom: 20px;
		border-bottom: 1px solid #2CAFAC;
	}
	.tips {
		width: 90%;
		color: #E30204;
		font-size: 12px;
		margin-bottom: 25px;
	}
	.btn {
		position: absolute;
		left: 50%;
		margin-left: -66px;
		bottom: -18px;
		width: 132px;
		height: 35px;
		background: #2CAFAC;
		border: none;
		font-size: 13px;
		color: #FFFFFF;
		font-weight: 400;
		border-radius: 17px;
	}
	::-webkit-input-placeholder { /* Edge */
	  color: #2CAFAC;
	}
	
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	  color: #2CAFAC;
	}
	
	::placeholder {
	  color: #2CAFAC;
	}
</style>
